<template>
  <div class="container">
    <!-- 头部 -->
    <div class="header">
      <div class="title-area">
        <div class="title">
          <img class="img-rules" src="@/assets/images/home/rules.png" />
          <img class="img-title" src="@/assets/images/home/title.png" />
          <img class="img-prize" src="@/assets/images/home/prize.png" />
        </div>
        <div class="sub-title">
          <span class="title-txt">战胜大盘指数，瓜分8888元现金奖券</span>
          <van-popover className="info-popover" v-model="showInfoPopover" theme="dark" placement="left-start" trigger="click">
            <span class="info-txt">
              自选产品加入策略组合每日和指定大盘指数进行涨跌幅PK，胜利将计算胜场，胜场靠前用户将进入排行榜，活动结束即可参与瓜分大奖哦~
            </span>
            <template #reference>
              <img class="img-info" src="@/assets/images/home/info.png" mode="heightFix" />
            </template>
          </van-popover>
        </div>
        <div class="prize-date">
          <span class="date-txt">2022.11.05 — 2022.12</span>
        </div>
      </div>
    </div>

    <!-- 订阅通知 -->
    <div class="subscribe-notice">
      <img class="img-subscribe-notice" src="@/assets/images/home/subscribe-notice.png" />
    </div>

    <!-- 收益组合 -->
    <div class="combination">
      <img class="img-combination" src="@/assets/images/home/combination.png" />
    </div>

    <!-- 抽奖卡 -->
    <div class="prize-card">
      <img class="img-prize-card" src="@/assets/images/home/prize-card.png" />
    </div>

    <!-- 我的策略组合 -->
    <div class="my-tactics">
      <div class="my-tactics-title">
        <img class="img-my-tactics-title" src="@/assets/images/home/my-tactics-title.png" />
      </div>
      <div class="my-tactics-cont">
        <div class="my-tactics-box">
          <img class="img-my-tactics-box" src="@/assets/images/home/my-tactics-box-1.png" />
        </div>
        <div class="my-tactics-box">
          <img class="img-my-tactics-box" src="@/assets/images/home/my-tactics-box-2.png" />
        </div>
      </div>
    </div>

    <!-- 投资风向标 -->
    <div class="investment-vane">
      <div class="investment-vane-title">
        <img class="img-investment-vane-title" src="@/assets/images/home/investment-vane-title.png" />
      </div>
      <van-swipe class="investment-vane-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
      </van-swipe>
    </div>

    <!-- 排行榜 -->
    <div class="ranking-list">
      <div class="ranking-list-title">
        <img class="img-ranking-list-title" src="@/assets/images/home/ranking-list-title.png" />
      </div>
      <div class="ranking-list-cont">
        <div class="rank-banner">
          <img class="img-rank-banner" src="@/assets/images/home/rank-banner.png" />
        </div>
        <div class="rank-user-box">
          <div class="rank-user">
            <img class="img-rank-user" src="@/assets/images/home/man.png" />
            <div class="rank-user-name">用户6543</div>
          </div>
          <div class="rank-user-info">
            <div class="rank-user-info-item">
              <span>11</span>
              <span>挑战场数</span>
            </div>
            <div class="rank-user-info-item">
              <span>10</span>
              <span>胜场数</span>
            </div>
            <div class="rank-user-info-item">
              <span>1</span>
              <span>当前排名</span>
            </div>
          </div>
        </div>
        <div class="rank-table-box">
          <table class="ranking-list-table">
            <tr>
              <th>排名</th>
              <th>用户</th>
              <th>胜场</th>
            </tr>
            <tr v-for="(item, index) in rankingList" :key="index">
              <td>
                <template v-if="index === 0">
                  <img class="img-rank" src="@/assets/images/home/rank-1.png" />
                </template>
                <template v-else-if="index === 1">
                  <img class="img-rank" src="@/assets/images/home/rank-2.png" />
                </template>
                <template v-else-if="index === 2">
                  <img class="img-rank" src="@/assets/images/home/rank-3.png" />
                </template>
                <template v-else>
                  {{ index + 1 }}
                </template>
              </td>
              <td>
                <img class="img-man" src="@/assets/images/home/man-small.png" />
                {{ item.userName }}
              </td>
              <td>{{ item.wins }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        showInfoPopover: true,
        rankingList: [
          {
            userName: '用户1122',
            wins: 10
          },
          {
            userName: '用户1122',
            wins: 10
          },
          {
            userName: '用户1122',
            wins: 10
          },
          {
            userName: '用户1122',
            wins: 10
          },
          {
            userName: '用户1122',
            wins: 10
          },
          {
            userName: '用户1122',
            wins: 10
          },
          {
            userName: '用户1122',
            wins: 10
          },
          {
            userName: '用户1122',
            wins: 10
          },
          {
            userName: '用户1122',
            wins: 10
          },
          {
            userName: '用户1122',
            wins: 10
          },
          {
            userName: '用户1122',
            wins: 10
          },
          {
            userName: '用户1122',
            wins: 10
          }
        ]
      }
    },
    mounted() {}
  }
</script>

<style lang="less" scoped>
  @bg-color: #ffcb71;
  @base-font-color: #e7532e;
  .flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .container {
    background-color: @bg-color;
    width: 100vw;
    min-height: 100vh;
    position: relative;
    background-image: url('../../assets/images/home/bg.png');
    background-repeat: no-repeat;
    background-size: cover;
  }

  .header {
    position: relative;
    height: 130px;
    padding-top: 24px;

    .title {
      .flex-center();
      position: relative;
      justify-content: center;

      .img-prize,
      .img-rules {
        height: 35px;
        position: absolute;
      }

      .img-prize {
        right: -4px;
      }

      .img-rules {
        left: -4px;
      }

      .img-title {
        height: 55px;
      }
    }

    .sub-title {
      color: #ffffff;
      paddig: 10px;
      text-align: center;
      line-height: 15px;
      height: 15px;
      .title-txt {
        padding-right: 5px;
        font-size: 16px;
        font-weight: bold;
      }

      .img-info {
        height: 15px;
        width: 15px;
        vertical-align: middle;
      }
    }
    .prize-date {
      color: #ffffff;
      padding: 10px;
      text-align: center;
      .date-txt {
        background-color: #bd0937;
        padding: 5px 15px;
        font-size: 12px;
        border-radius: 12px;
        font-weight: 400;
      }
    }
  }

  .info-popover {
  }

  .info-txt {
    display: block;
    line-height: 20px;
    width: 165px;
    height: 96px;
    padding: 10px;
  }

  .subscribe-notice {
    position: absolute;
    right: 0;
    top: 326px;
    .img-subscribe-notice {
      width: 74px;
      height: 67px;
    }
  }

  .combination {
    .flex-center();
    .img-combination {
      width: 351px;
      height: 162px;
    }
  }

  .prize-card {
    margin-top: 30px;
    .flex-center();
    .img-prize-card {
      width: 357px;
      height: 250px;
    }
  }

  .my-tactics {
    margin-top: 20px;
    .my-tactics-title {
      text-align: center;
      padding: 10px 0;
    }
    .my-tactics-cont {
      .flex-center();
      justify-content: space-evenly;
    }
  }
  .investment-vane {
    margin-top: 20px;
    .investment-vane-title {
      text-align: center;
    }
    .investment-vane-swipe {
      margin: 10px;
      border-radius: 6px;
      .van-swipe-item {
        color: @base-font-color;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background: linear-gradient(to right, #ffffff, #ffe5c3);
      }
    }
  }
  .ranking-list {
    margin-top: 20px;
    .ranking-list-title {
      text-align: center;
    }
    .ranking-list-cont {
      margin: 0 8px;
      background: #ffd4af;
      padding: 10px;
      border-radius: 8px;
      margin-top: 10px;
      .rank-banner {
        .img-rank-banner {
          border-radius: 6px;
          width: 100%;
        }
      }

      .rank-user-box {
        position: relative;
        text-align: center;
        .img-rank-user {
          width: 50px;
          height: 50px;
          margin-bottom: 20px;
        }
        .rank-user-name {
          width: 100px;
          height: 24px;
          line-height: 24px;
          border-radius: 16px;
          background: #e3680b;
          color: #ffffff;
          position: absolute;
          left: 50%;
          top: 40px;
          transform: translateX(-50%);
          font-size: 12px;
        }
        .rank-user-info {
          color: @base-font-color;
          font-size: 12px;
          .flex-center();
          .rank-user-info-item {
            width: 150px;
            span {
              display: block;
            }
            span:first-child {
              font-size: 18px;
            }
          }
        }
      }
      .rank-table-box {
        border: 3px solid #e78207;
        border-radius: 3px;
        background: #ffffff;
        padding: 0 6px;
        margin-top: 20px;
      }
      .ranking-list-table {
        width: 100%;
        font-size: 12px;
        th,
        td {
          text-align: center;
          height: 32px;
          line-height: 32px;
        }
        th {
          color: #999999;
          font-weight: normal;
        }
        td {
          color: #333333;
        }
        .img-rank {
          width: 22px;
          height: 18px;
        }
        .img-man {
          width: 22px;
          height: 22px;
          vertical-align: sub;
          padding-right: 3px;
        }
      }
    }
  }
</style>
<style>
  .van-popover__content:has(.info-txt) {
    background-color: rgba(0, 0, 0, 0.6) !important;
  }
</style>
